<template>
  <div id="claslist">
    <!--顶部轮播-->
    <div>
      <!--<Carousel v-bind="obj"></Carousel>-->
      <router-link to="/promotionCompany"><img src="../../../static/img/banner2.jpg" style="width: 100%"></router-link>
    </div>
    <!--菜单组件-->
    <MenuClass></MenuClass>
    <div class="article-list">
      <ul class="article-list-ul" id="refresh_list">
        <Listitem v-for="(item,index) in activitylist" :key="index" v-bind="item"></Listitem>
      </ul>
      <div class="no_more" v-if="show_no_more">---没有更多了---</div>
      <!--加载中组件-->
      <loading v-if="loading"></loading>
    </div>
    <div style="height:51px;"></div>
  </div>
</template>

<script>
  import Carousel from '../../components/common/Carousel'
  import MenuClass from './child/ClassMenu'
  import Listitem from './child/Listitem'
  import Loading from './child/Loading'
  import API from '../../config/api'

  import $ from 'jquery'

  export default {
    components: {Carousel, MenuClass, Listitem, Loading},
    data() {
      return {
        obj: {
          'bottom': false, 'page': 2, 'type': '全部'
        },
        is_bottom: false,
        loading: false,
        show_no_more: false,
        activitylist: [],
        timer: null,
      }
    },
    methods: {
      load() {
        //load方法
        var load = this.load_data;
        var that = this.$route.name;
        //监听滚动事件
        var _this = this.obj;

        $(window).scroll(
          function () {
            if (that == 'classroom') {
              if ($(window).scrollTop() + $(window).height() >= $('#claslist').height() && !_this.bottom) {
                _this.bottom = true;
                load(_this);
              }
            }
          }
        );
      },
      // 发送ajax
      ajax_request(request_message, page) {
        this.$axios.post(request_message.url, request_message.params)
          .then((res) => {
            if (res) {
              // 返回数据---对象列表[obj,obj]
              var data_list = res;
              if (data_list.length == 0) {
                this.loading = false;
                this.show_no_more = true;
                return;
              } else {
                if (page == 1) {
                  this.load();
                }
                for (var i = 0; i < data_list.length; i++) {
                  this.activitylist.push(data_list[i]);
                }
                //引用传递修改页数和开启请求开关
                this.loading = false;
                request_message.obj.page += 1;
                request_message.obj.bottom = false;
                clearTimeout(this.timer);
              }
            }
            else {
              this.$msg('网络异常请检查您当前网络', 'error');
            }
          })
      },
      //获取数据方法
      load_data(obj) {
        var _this = this;
        var limit = 4;
        var url = API.getArticleList;
        var params = {
          type: obj.type,
          offset: obj.page,
          limit: limit
        };

        var request_message = {'obj': obj, 'params': params, 'url': url};
        this.loading = true;
        if (obj.page == 1) {
          this.ajax_request(request_message, obj.page);
        } else {
          this.timer = setTimeout(function () {
            _this.ajax_request(request_message, obj.page)
          }, 500);
        }
      },
    },
    mounted() {
      this.load_data({'bottom': false, 'page': 1, 'type': '全部'});
    },
  }
</script>

<style scoped>

  .module-title {
    display: flex;
    padding: 0.24rem 0.24rem 0rem 0.24rem;
    justify-content: space-between;
  }

  .module-title .module-title-item {
    background: #f3f6f6;
    display: flex;
    padding: 0.1rem 0.6rem 0.24rem 0.37333rem;
    justify-content: space-between;
  }

  .module-title .module-title-item .img-box {
    line-height: 1.2rem;
  }

  .module-title .module-title-item .img-box img {
    width: 1rem;
    margin-right: 0.2rem;
    vertical-align: middle
  }

  .module-title .module-title-item .word {
    font-size: 0.3rem;
    line-height: 1.2rem;
  }

  .article-list {
    padding: 0.15rem 0.3rem 0rem 0.3rem;
    border-bottom: 0.01467rem solid #d9d9d9;
  }

  .article-list .article-list-ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .no_more {
    text-align: center;
    line-height: 55px;
  }


</style>
